<template>
  <h2>indexDB</h2>
  <el-button @click="getList">读取数据库</el-button>
</template>
<script setup lang="ts">
// 我们的客户数据看起来像这样。
const customerData = [
  { ssn: 1, name: 'Bill', age: 35, email: 'bill@company.com' },
  { ssn: 2, name: 'Donna', age: 32, email: 'donna@home.org' }
]

let db: any, customerObjectStore:any
// 打开我们的数据库
const request = window.indexedDB.open('MyTestDatabase', 3)
// 错误处理
request.onerror = () => {
  console.log('打开数据库失败')
}
// 成功处理
request.onsuccess = (event: any) => {
  console.log('数据库打开成功')
  db = event.target.result
  customerObjectStore = db
    .transaction('customers', 'readwrite')
    .objectStore('customers')
}
// 新建数据库或数据库版本变化时触发
request.onupgradeneeded = (event:any) => {
  db = event.target.result
  // 好比新建一张数据库表
  const objectStore = db.createObjectStore('customers', { keyPath: 'ssn' })
  // 创建一个索引以通过姓名来搜索客户。名字可能会重复，所以我们不能使用 unique 索引。
  objectStore.createIndex('姓名', 'name', { unique: false })

  // 使用邮箱建立索引，我们想确保客户的邮箱不会重复，所以我们使用 unique 索引。
  objectStore.createIndex('邮箱', 'email', { unique: true })

  // 使用事务的 oncomplete 事件确保在插入数据前对象存储已经创建完毕。
  objectStore.transaction.oncomplete = () => {
    // 将数据保存到新创建的对象存储中。
    customerObjectStore = db
      .transaction('customers', 'readwrite')
      .objectStore('customers')
    customerData.forEach((customer) => {
      customerObjectStore.add(customer)
    })
  }
}

const getList = async() => {
  const res: any = await getData()
  console.log(res)
}
// 读取数据库
const getData = () => {
  return new Promise((resolve, reject) => {
    customerObjectStore = db
      .transaction('customers', 'readwrite')
      .objectStore('customers')
    const mid = customerObjectStore.openCursor()
    const res:any = []
    mid.onsuccess = (event: any) => {
      const cursor = event.target.result
      if (cursor) {
        res.push(cursor.value)
        console.log(res)
        cursor.continue()
      } else {
        console.log(res)
        resolve(res)
      }
    }
    mid.onerror = (err:any) => {
      console.log('出错了')
      reject(err)
    }
  })
}
</script>
